<template>
  <div class="layout">
    <Layout>
      <Header class="header-full">
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo"><img src="static/images/bom.png"/></div>
          <div class="layout-nav">
            <MenuItem name="1">
              <Icon type="ios-navigate"></Icon>
              <span @click="thisIndex1" >主页</span>
            </MenuItem>
            <MenuItem name="2">
              <Icon type="ios-keypad"></Icon>
              <span @click="thisIndex2" >公司环境</span>
            </MenuItem>
            <MenuItem name="3">
              <Icon type="ios-analytics"></Icon>
              <span @click="thisIndex3" >招贤纳士</span>
            </MenuItem>
            <MenuItem name="4">
              <Icon type="ios-paper"></Icon>
              <span @click="thisIndex4" >技术支持</span>
            </MenuItem>
          </div>
        </Menu>
      </Header>
      <Content>
        <Breadcrumb :style="{margin: '20px 0'}">
          <BreadcrumbItem> <span @click="thisIndex2" >公司环境</span></BreadcrumbItem>
          <BreadcrumbItem><span @click="thisIndex5" >企业介绍</span></BreadcrumbItem>
          <BreadcrumbItem><span @click="thisIndex6" >企业文化</span></BreadcrumbItem>
        </Breadcrumb>
        <div class="content">
          <div class="img-class"></div>
          <div class="row" v-for="item in list">
            <div class="right-div">
              <div class="mid-size">{{ item.name }}</div>
              <div class="mid1-size">{{ item.desc }}</div>
            </div>
          </div>
        </div>
      </Content>
      <Footer class="layout-footer-center">2018-2020 &copy; TalkingData</Footer>
    </Layout>
  </div>
</template>

<script>
  export default {
    name: 'culture',
    data () {
      return {
        list:[{
          name:'诚信',
          desc:'诚信是立足社会的基础，我们坚定不移的保持我们商业和个人的诚信，犹如爱护自己的生命。'
        },{
          name:'团结协作',
          desc:'企业是个组织，所以我们必须通过团队才能实现它的运作和发展。'
        },{
          name:'创新变革',
          desc:'面对快速发展变化的世界，我们处处力求创新和勇于变革，永远保持领先。 '
        },{
          name:'卓越作为',
          desc:'我们处处严格苛刻地要求完美，自已孜孜不倦地追求卓越，依此做好每一件事情'
        }]
      }
    },methods: {
      thisIndex2: function(){
        this.$router.push({path:'/HelloWorld'})
      },
      thisIndex1: function(){
        this.$router.push({path:'/'})
      },
      thisIndex3: function(){
        this.$router.push({path:'/recruit'})
      },
      thisIndex4: function(){
        this.$router.push({path:'/Technology'})
      },
      thisIndex5: function(){
        this.$router.push({path:'/introduce'})
      },
      thisIndex6: function(){
        this.$router.push({path:'/culture'})
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped type="text/stylus">
  @import '~@/common/variable.styl'
  .header-full {
    padding 0
  }
  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;

    .layout-logo{
      width: 100px;
      height: 30px;
      background: #5b6270;
      border-radius: 3px;
      float: left;
      position: relative;
      top: 15px;
      left: 20px;
      img{
        width 30%
        height 30px
      }
    }
    .layout-nav{
      width: 450px;
      margin: 0 auto;
      margin-right: 20px;
    }
    .layout-footer-center{
      text-align: center;
    }
    .content {
      background-color gainsboro;
      padding 0 ;
    .img-class {
      background: url('../../static/images/cat9.jpg') no-repeat center center / 100% 100%;
      width 100%;
      height 500px;
    }
      .row{
        overflow hidden;
        margin-bottom 10px;
        .right-class {
          float right;
        }
        .right-div {
          .mid-size{
            font-size:22px;
            color: red
          }
          .mid1-size{
            font-size: $font-size-medium;
            color: darkslategray
            margin-right:0px;
          }
        }
        .item-div {
          float left;
          width 33.3%;
          img {
            width 100%;
          }
          p {
            font-size 14px;
          }
        }
      }
    }
  }
</style>
